Visualize Tab Stops, Headings, and Landmark Regions with Accessibility Insights
On this page
Another tool I recommend is the Accessibility Insights browser extension.
Like many of the tools we work with in this workshop series, it is also powered by the axe-core API under the hood.
The Accessibility Insights FastPass is similar to what we've seen with Axe DevTools, so we won't go into that part further.
However, I do want to share some of my other favorite parts of Accessibility Insights.
Use Ad hoc Tools to Visualize Structure
Selecting the Ad hoc tools option in the Accessibility Insights extension loads a menu of available visualizations.
The Tab Stops Tool
One of the useful ad hoc tools that make for interesting screenshots is the Tab Stop tool.
Every time you hit Tab to move through the page, the ad hoc tool will draw lines and connect dots to where your focus went, and in what order.
Here's what it looks like on the homepage as it is now:
Here’s what the Tab Stops tool looked like before we made any fixes to fully hide inactive nav submenus:
That’s a pretty huge difference and helps drive home how bad the original keyboard experience was.
The Headings Tool
Toggling on the Headings function, Accessibility Insights will draw colored boxes around the headings and include an indicator of their level.
Here’s how the Contact section on the About page looks:
The Landmarks Tool
Similar to the Headings tool, the Landmarks tool will highlight and label the page's landmarks.
This is useful for visualizing the landmarks you currently have and determining what on your page might work well in a region.
There’s an entire section of the Semantic Markup workshop dedicated to Headings & Landmarks for going further into the topic.
Accessibility Insights Assessment
The Assessment tool is an awesome guided tool that has you work through the WCAG AA success criteria, including things that can't be automated.
Each section provides information about what you need to do in order to test your application. Once you've performed the test, you self-report whether it passed or failed.
Accessibility Insights is a great tool to add to your manual testing process!



